<template>
    <div class="mainWrapper">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-diaodu fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>系统设置</el-breadcrumb-item>
			<el-breadcrumb-item>加价管理</el-breadcrumb-item>
		</el-breadcrumb>
        <div class="content_Box box-shadow">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="4">
						<el-button type="success" @click="goToAdd(1)" round size="mini">新增单店加价</el-button>
					</el-col>
					<el-col :span="20">
						<el-form :inline="true" :model="searchForm" class="form-inline fr" @keyup.enter.native="shearchBtn()">
                             <el-select v-model="searchForm.shop_sn" filterable placeholder="店铺名称" clearable>
                                <el-option
                                v-for="item in shopList"
                                :key="item.shop_sn"
                                :label="item.name"
                                :value="item.shop_sn">
                                </el-option>
                            </el-select>
                            <lh-agent-list @sendValue="setValue" :reset="agent_reset"></lh-agent-list>
							<el-form-item>
								<el-select class="w_110" v-model="searchForm.city_id" placeholder="请选择城市" @change="changeCity">
									<el-option
										v-for="item in cityList"
										:key="item.id"
										:label="item.name"
										:value="item.id"
									></el-option>
								</el-select>
							</el-form-item>
							<!-- <el-form-item>
								<el-select v-model="s_time_slot" multiple collapse-tags placeholder="商圈">
									<el-button size="mini" type="primary" class="round-right all-area" @click="selectAllArea()" native-type="button">{{ areaStatus ? '取消全选' : '全选' }}</el-button>
									<el-option
										v-for="item in areaList"
										:key="item.id"
										:label="item.area_name"
										:value="item.id"
									></el-option>
								</el-select>
							</el-form-item> -->
                            <el-form-item class="w_120">
                                <el-select v-model="searchForm.industry" placeholder="行业" clearable @change="changeIndustry">
                                    <el-option
                                        v-for="(item, index) in industryJobList"
                                        :key="index"
                                        :label="item.label_name"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
							<el-form-item>
								<el-select v-model="searchForm.label_id" placeholder="岗位名称" class="w_120" clearable>
									<el-option 
                                        v-for="item in TypeArr" 
                                        :key="item.id" 
                                        :label="item.label_name" 
                                        :value="`${item.id}|${item.label_name}`"
                                    ></el-option>
								</el-select>
							</el-form-item>
                            <el-form-item>
								<el-select v-model="searchForm.status" placeholder="状态" class="w_120" clearable>
									<el-option 
                                        v-for="item in statusArr" 
                                        :key="item.id" 
                                        :label="item.label_name" 
                                        :value="`${item.id}`"
                                    ></el-option>
								</el-select>
							</el-form-item>
							<el-button size="mini" type="primary" class="round-right" native-type="button" @click="shearchBtn">搜索</el-button>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>
            <!-- 表格数据 -->
            <div class="tableMaxBox">
				<template>
					<el-table :data="priceList" stripe>
                        <el-table-column type="index" label="序号" width="50"></el-table-column>
                        <el-table-column property="shop_name" label="执行店铺" width="100"></el-table-column>
                        <!-- <el-table-column property="date" label="所属代理商" width="100"></el-table-column> -->
                        <el-table-column property="city_name" label="所属城市" width="100"></el-table-column>
                        <!-- <el-table-column property="area_name" label="所属商圈" width="100"></el-table-column> -->
                        <el-table-column property="industry_name" label="用工行业" width="100"></el-table-column>
                        <el-table-column property="label_name" label="用工岗位" width="100"></el-table-column>
                        <el-table-column label="等级" width="100">
                            <template>
                                <div>黄金</div>
                                <div>白银</div>
                                <div>青铜</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="劳动者加价(元/小时)">
                            <template slot-scope="scope">
                                <div>{{(scope.row.premium30/100).toFixed(2)}}</div>
                                <div>{{(scope.row.premium20/100).toFixed(2)}}</div>
                                <div>{{(scope.row.premium10/100).toFixed(2)}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="商家承担(元/小时)">
                            <template slot-scope="scope">
                                <div>{{(scope.row.premiumB30/100).toFixed(2)}}</div>
                                <div>{{(scope.row.premiumB20/100).toFixed(2)}}</div>
                                <div>{{(scope.row.premiumB10/100).toFixed(2)}}</div>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column property="date" label="加价开始日期" ></el-table-column>
                        <el-table-column property="date" label="加价结束日期" ></el-table-column> -->
                         <el-table-column property="status" label="状态" width="120">
                            <template slot-scope="scope">
                                <span class="success" v-if="scope.row.status == 1">启用</span>
                                <span class="danger" v-else>停用</span>
                            </template>
                        </el-table-column>
                        <el-table-column property="creater_name" label="操作人" width="120"></el-table-column>
                        <el-table-column property="add_time" label="创建时间" ></el-table-column>
                        <el-table-column fixed="right" label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button @click.native.prevent="goToAdd(2,scope.row)" type="text" size="small">编辑</el-button>
                                |
                                <el-button @click.native.prevent="updateStatus(scope.row.id,2)" class="danger" type="text" size="small" v-if="scope.row.status == 1">停用</el-button>
                                <el-button @click.native.prevent="updateStatus(scope.row.id,1)" class="success" type="text" size="small" v-else>启用</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                     <!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" :disableMountedFetch="true" @pagedata="onChildValue"></page>
                </template>
            </div>
        </div>
    </div>
</template>
<script>
    import { fetchLabelList,fetchAreaList,fetchShopList,fetShopPriceList,updateShopPriceStatus } from '@/api/shop.js'
    import { fetchIndustryJob } from '@/api/label.js'
    import { fetchUserLevelList } from '@/api/staff.js'
    export default {
        name: 'manageFeeList',
        data() {
            return {
                searchForm: {
                    city_id: '', //城市
                    industry: '', //行业
                    label_id: '', //岗位名称
                    status: '',//状态
                    shop_sn: ''
                },
                industryJobList: [], //行业列表
                TypeArr: [],  //岗位类别
                priceList: [], //列表数据
                shopList: [], // 店铺列表
                statusArr: [
                    {
                        id: '',
                        label_name: '全部'
                    },
                    {
                        id: 1,
                        label_name: '启用'
                    },
                    {
                        id: 2,
                        label_name: '停用'
                    }
                ],
                agent_id: '', //代理商
                agent_reset: 0,
                cityList: [], //城市列表
                city_val: '',
                city_id: '',
                area_arr: '', 
                areaList: [], //商圈列表
                area_id: '',
                area_name: '',
                s_time_slot: '',
			    areaStatus: false, //商圈全选
                pageNum: 1,
			    pageSizeNow: 20,
                total: 0
            }
        },
        mounted(){},
        methods: {
            //搜索
            shearchBtn() {
                this.getList()
            },
            //重置
            resetBtn(){
                Object.keys(this.searchForm).forEach((key) => (this.searchForm[key] = ''))
                 // 重置代理商
			    this.agent_reset += 1
                this.areaStatus = true
            },
            //操作 - 改变状态
            async updateStatus(id,type){
                try {
                    let ret = await updateShopPriceStatus({
                        id: id,
                        status: type
                    })
                    this.getList()
                } catch (err) {
                    console.log(err)
                }
            },
            //加价列表
            async getList(){  
                try {
                    let ret = await fetShopPriceList({page:this.pageNum,pageSize:this.pageSizeNow,agent_id:this.agent_id,...this.searchForm})
                    this.priceList = ret.list;
                    this.total = ret.count;
                } catch (err) {
                    console.log(err)
                }
            },
            //代理商
            async setValue(data) {
                this.searchForm.shop_sn = ''
                this.agent_id = data.agent_id
                this.cityList = data.city_list
                this.searchForm.city_id = +this.cityList[0].id
                this.searchForm.industry = ''
                this.searchForm.label_id = ''
                this.listArea() //商圈列表
                this.listUser() //店铺列表
                this.getIndustryJob() //行业列表
            },
            // 监听城市val变化
            changeCity() {
                this.searchForm.industry = ''
                this.searchForm.shop_sn = ''
                this.searchForm.label_id = ''
                this.getIndustryJob() //行业列表
                this.listArea() //商圈列表
                this.listUser() //店铺列表
            },
            //店铺列表
            async listUser() {
                try {
                    let ret = await fetchShopList({
                        sign_status: 30, //已合作的店铺
                        status: 1, //启用的店铺
                        city_id: this.searchForm.city_id,
                        agent_id: this.agent_id
                    })
                    if (ret.list.length) {
                        ret.list.forEach(item => {
                            item.value = item.name
                        })
                        this.shopList = ret.list
                    } else {
                        this.shopList = []
                    }
                } catch (err) {
                    console.log(err)
                }
            },
            //获取商圈列表
            async listArea(city_id) {
                try {
                    this.s_time_slot = []
                    let ret = await fetchAreaList({
                        city_id: this.searchForm.city_id,
                        agent_id: this.agent_id
                    })
                    if (ret.list.length) {
                        ret.list.forEach(item => {
                            item.value = item.area_name
                        })
                        this.areaList = ret.list
                        // 如果本地this.area_arr。存在值，那么不再赋予，如果不存在。赋予相关值
                        // if (this.s_time_slot == '' || this.s_time_slot == null) {
                        //     // 默认选中非254-平谷的
                        //     this.areaList.forEach(element => {
                        //         // 平谷
                        //         if (element.area_name != '平谷') {
                        //             var pusharr = element.id
                        //             this.s_time_slot.push(pusharr)
                        //             this.areaStatus = true
                        //         }
                        //     })
                        // }
                        this.getList()
                    } else {
                        this.areaList = []
                    }
                } catch (err) {
                    console.log("获取商圈"+err)
                }
            },
            //全选-取消全选商圈
            selectAllArea() {
                let arr = []
                this.areaList.forEach(item => {
                    arr.push(item.id)
                })
                if (this.areaStatus == true) {
                    this.area_arr = arr
                } else {
                    this.area_arr = []
                }
                this.areaStatus = !this.areaStatus
            },
             //行业列表
            async getIndustryJob() {
                this.TypeArr = []
                try {
                    let ret = await fetchIndustryJob({
                        city_id: this.searchForm.city_id
                    })
                    if(ret.length>0){
                        this.industryJobList = ret
                    }else{
                        this.industryJobList = []
                    }
                } catch (err) {
                    console.log(err)
                }
            },
            //监听行业
            changeIndustry() {
                //清理岗位
                this.searchForm.label_id = '';
                //岗位列表
                if(this.searchForm.industry){
                    this.TypeArr = this.industryJobList.filter(x => x.id == this.searchForm.industry)[0].children
                }else{
                    this.TypeArr = ''
                }
            },
             //分页组件->子组件传值
            onChildValue(item) {
                this.pageNum = item[0]
                this.pageSizeNow = item[1]
                this.getList()
            },
            //新增管理费规则跳转路由
            goToAdd(type,e){
                if(+type == 2){
                    this.$router.push({
                        path:"/shopAddPrice",
                        query:e
                    })
                }else{
                    this.$router.push('/shopAddPrice')
                }
            },
        }
    }
</script>
<style scoped lang="scss">
    .success{
        color: green !important;
    }
    .danger{
        color: red !important;
    }
</style>


// WEBPACK FOOTER //
// src/components/shopPrice/ShopAddPriceList.vue